<template>
  <div>
    <!-- 头部导航 -->
    <el-row class="top">
      <el-col :span="2"><div class="grid-content bg-purple" @click="home">网站首页</div></el-col>
      <el-col :span="15"><div class="grid-content bg-purple-light" @click="home">鲜花网站</div></el-col>
      <el-col :span="2"><div class="grid-content bg-purple" @click="goto">退出登录</div></el-col>
      <el-col :span="2"><div class="grid-content bg-purple-light" @click="admin">admin</div></el-col>
      <el-col :span="2"><div class="grid-content bg-purple-light">购物车</div></el-col>
    </el-row>

    <!-- 购物清单 -->
    <div class="title">
      <div class="p">购物清单</div>
      <div class="spxx">
        <el-checkbox v-model="checkAll"></el-checkbox>
        <div class="xx">
          <span>商品信息</span>
          <div class="right">
            <div>单价</div>
            <div>数量</div>
            <div>小计</div>
            <div>删除</div>
          </div>
        </div>
      </div>
      <!-- 每一个商品 -->
      <div class="spxx" v-for="(item,index) in list" :key="index">
        <el-checkbox v-model="item.ckd"></el-checkbox>
        <div class="xx">
          <span><img :src=" item.item.url" width="100px" height="100px"></span>
          <div class="right">
            <div>￥{{ item.item.price}}</div>
            <div>
              <el-input-number @change="changeNum(item.num)" :min="1" size="mini" v-model="item.num"></el-input-number>
            </div>
            <div>￥{{ item.item.price*item.num }}</div>
            <div class="delete" @click="del(index)">删除</div>
          </div>
        </div>
      </div>
      
      <div class="bottom" style="float:right">
        <span>总计 <a class="a">{{ $store.getters.number }}</a></span>
        <span>应付金额 <a class="a">{{ $store.getters.total }}</a></span>
        <el-button type="primary" @click="dels">现在结算</el-button>
      </div>
    </div>
  </div>


</template>

<script>
import {mapMutations} from 'vuex'
export default {
  name: "shopcart",
  data() {
    return {
      num: 1,   //商品数量
      price:165,    //商品价格
      list: this.$store.state.cartList,   // 购物车数据
    }
  },
  computed: {
    checkAll: {
      get() {
        /* 如果没有选择，则返回 */
        if (this.list.length == 0) {
          return false
        }
        /* 把商品列表中选中的商品的ckd设置为ture */
        return this.$store.state.cartList.every(item => {
          return item.ckd == true
        })
      },
      set(newVal) {
        this.$store.commit('ckd', newVal)
      },
    }
  },
  methods:{
    /* 向shop组件跳转 */
    home(){
      this.$router.push('/shop')
    },
    /* 向admin组件跳转 */
    admin(){
      this.$router.push('/admin')
    },
    /* 退出登录事件 */
    goto(){
      this.$confirm('是否退出登录？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '退出成功!',
        });
        this.$router.push('/')
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消退出'
        });
      });
    },
    /* 删除商品事件 */
    del(index) {
      this.$confirm('是否删除该商品？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!',
        });
        this.$store.commit('del', index)
      }).catch(() => {

      });
    },

    /* 结算商品事件 */
    dels(){
      this.$confirm('是否结算全部商品？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '结算成功!',
        });
        this.$store.commit('dels',0)
      }).catch(() => {

      });
    },
    
    //方法集合，简便方法的调用
    ...mapMutations(['changeNum'])
  }
}
</script>

<style scoped>
  .top{
    height: 40px;
    background: #7c7272;
    color: #ffffff;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .title{
    margin: 40px;
    border: 1px solid #000;
    border-radius: 10px;
  }
  .p{
    padding: 20px 20px 10px 20px;
  }
  .spxx{
    padding: 5px 20px;
    font-size: 14px;
    display: flex;
    align-items: center;
    background: #bfbebe;
  }
  .xx{
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
  .xx span{
    margin-left: 50px;
  }
  .right{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .right div{
    display: flex;
    justify-content: center;
    width: 120px;
    height: 40px;
  }
  .delete{
    color: #095fb3;
  }
  .youhui{
    padding: 10px 20px;
  }
  .youhui button{
    border-radius: 5px;
    margin-left: 10px;
  }
  .a{
    color: red;
  }
  .bottom{
    display: flex;
    justify-content: right;
    align-items: center;
    padding: 0 60px 20px 0;
  }
  .bottom span{
    margin-right: 20px;
  }
</style>
